<template>
  <div>
    <el-row>
      <el-col :span="3">&nbsp;</el-col>
      <el-col :span="18">
        <div v-for="(item, index) in articleList" :key="item.id" style="margin-top: 20px" @click="$router.push(`/article/${item.id}`)">
          <!--文章图片-->
          <img :src="item.articleCover" style="width: 180px; height: 100px">
          <!--文章内容-->
          <div style="vertical-align: top; display: inline-block; height: 100px; margin-left: 10px" >
            <!--标题-->
            <div style="height: 30px">{{ item.articleTitle }}</div>
            <!--观看, 赞, 评论, 作者-->
            <div style="height: 20px">
              作者: {{ item.articleAuthor }}  观看{{ item.articleWatchCount }} 点赞{{ item.articleThuCount }} 评论{{ item.articleCommentsCount }} 时间{{ item.articleDate }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">&nbsp;</el-col>
    </el-row>
  </div>
</template>

<script>
import { listArticle } from '@/api/article'

export default {
  data () {
    return {
      articleList: []
    }
  },
  async created () {
    const res = await listArticle()
    this.articleList = res.data.rows
    console.log(this.articleList)
  }
}
</script>

<style scoped lang="less">

</style>
